<template>
  <el-dialog
    title="添加常用联系人"
    :visible.sync="dialogVisible"
    width="600px"
  >
    <el-form
      ref="contactForm"
      :model="contactForm"
      :rules="rules"
      label-width="120px"
    >
      <el-form-item
        label="联系人姓名:"
        prop="LinkName"
      >
        <el-input
          v-model="contactForm.LinkName"
          placeholder="请输入联系人姓名"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="电话号码:"
        prop="LinkPhone"
      >
        <el-input
          v-model="contactForm.LinkPhone"
          placeholder="请输入电话号码"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="与主号关系:"
        prop="relation"
      >
        <el-select
          v-model="contactForm.relation"
          placeholder="请选择与主号关系"
          style="width: 100%"
        >
          <el-option
            v-for="item in relationOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="生日:"
        prop="birthday"
      >
        <el-date-picker
          v-model="contactForm.birthday"
          value-format="yyyy-MM-dd"
          type="date"
          placeholder="选择日期"
          style="width: 100%"
        ></el-date-picker>
      </el-form-item>
      <el-form-item
        label="备注:"
        prop="LinkDesc"
      >
        <el-input
          v-model="contactForm.LinkDesc"
          placeholder="请输入备注信息"
        ></el-input>
      </el-form-item>
    </el-form>
    <span
      slot="footer"
      class="dialog-footer"
    >
      <el-button @click="dialogVisible = false">关闭</el-button>
      <el-button
        type="primary"
        @click="submitForm"
      >
        保存
      </el-button>
    </span>
  </el-dialog>
</template>

<script>
import { isMobile } from '@/utils/validate'
import { mapActions } from 'vuex'

export default {
  name: 'DialogContact',
  data() {
    const validatePhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('电话号码不能为空'))
      }
      if (!isMobile(value)) {
        return callback(new Error('手机号格式错误'))
      }
      callback()
    }
    return {
      dialogVisible: false,
      contactForm: {
        LinkName: '',
        LinkPhone: '',
        relation: '',
        birthday: '',
        LinkDesc: ''
      },
      relationOptions: [],
      // 补充表单验证规则
      rules: {
        LinkName: [
          { required: true, message: '请输入联系人姓名', trigger: 'blur' }
        ],
        LinkPhone: [
          { required: true, message: '请输入电话号码', trigger: 'blur' },
          { validator: validatePhone, trigger: 'blur' }
        ],
        relation: [
          { required: true, message: '请选择与主号关系', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    ...mapActions('select', ['getClueSource']),
    showDialog() {
      this.dialogVisible = true
      this.contactForm = {
        LinkName: '',
        LinkPhone: '',
        relation: '',
        birthday: '',
        LinkDesc: ''
      }
      this.loadRelationOptions()
    },
    async loadRelationOptions() {
      try {
        const res = await this.getClueSource()
        this.relationOptions = res.LinkRelation.map((item) => ({
          value: item.id,
          label: item.title
        }))
      } catch (error) {
        console.error('获取与主号关系数据失败', error)
      }
    },
    submitForm() {
      this.$refs.contactForm.validate((valid) => {
        if (valid) {
          this.$emit('success', this.contactForm)
          this.dialogVisible = false
        }
      })
    }
  }
}
</script>

<style scoped>
/* 可根据需求添加样式 */
</style>
